<template>
  <!-- <shoppTop :city="city" :title="'优惠商品'"></shoppTop> -->
  <uni-nav-bar title="卡车商城" color="#333" :border="false" statusBar></uni-nav-bar>
  <view v-if="state == '1'">
    <FirstLevel></FirstLevel>
    <scroll-view
      scroll-y="true"
      enable-back-to-top
      @scrolltolower="loadMore"
      class="package scroll-box"
      :style="{ height: pageHeight + 'px', padding: '20rpx 0px' }"
    >
      <view v-for="(item, index) in orderLists" :key="item.id">
        <view class="space-between shopTop" @click.stop="navTo('shopp/Shopkeeper?id=' + item.store_id)">
          <view class="packageLsit">
            <image src="../../static/groupBenefits/shop.png" mode=""></image>
            <text>{{ item.store_name }}</text>
            <uni-icons type="forward" size="19" color="#666"></uni-icons>
          </view>
        </view>
        <ShopList :type="'distance'" :shoppAll="item"></ShopList>
      </view>
    </scroll-view>
  </view>
  <image :src="shopEmpty" mode="widthFix" v-else style="width: 100%" @click="telCall('400-109-1606')"></image>
  <Lotlats @position="position"></Lotlats>
  <!-- 底部功能按钮 -->
  <bottomFil :active="2"></bottomFil>
</template>

<script setup lang="ts">
import { navTo } from '@/utils/navigator';
import bottomFil from '@c/pobulic/bottomFil.vue';
import FirstLevel from '@c/groupBenefits/classification.vue';
import ShopList from '@c/groupBenefits/shopGrid.vue';
import { errorToast } from '@/utils/prompt';
import { shopEmpty } from '@/utils/Static';
import { ref, onMounted } from 'vue';
import { shops } from '@/gql/shop';
import { TestIem } from '@/gql/user';
import { telCall } from '@/utils/copyText';
// import { GetCities } from '@/gql/team';
import { toPublish } from '@mqtt';
import Lotlats from '@c/team/Lotlat.vue';
import { getDriverID } from '@/stores/driverID';
/**
 * 商城主页
 * @param user_id 用户iD
 * @param pageHeight 当前商品列表高度
 * @param isLoading 上拉加载状态
 * @param lastPage 商品分页
 * @param currentPage 当前获取页数
 * @param orderLists 商品列表
 * @param state 显示权限
 * @param lon 经度
 * @param lat 纬度
 * @return
 */
const user_id = getDriverID();
// const city=ref('')

const pageHeight = ref();
const isLoading = ref(false);
const lastPage = ref(1);
const currentPage = ref(1);
const orderLists = ref([]);

const state = ref('');
const lon = ref();
const lat = ref();
onMounted(() => {
  if (!uni.getStorageSync('storage_key').id || !user_id) {
    uni.setStorageSync('storage', 'user');
    uni.reLaunch({
      url: '/pages/login/login',
    });
    return;
  }
  UserIdentity();
  uni.getSystemInfo({
    success: function (res) {
      pageHeight.value = (res.windowHeight - 218).toString();
    },
  });
});
/**
 * 获取当前城市信息
 * @param {Object} lat 当前位置的纬度
 * @param {Object} lot 当前位置的经度
 */
function position(la: any, lo: any) {
  lon.value = lo;
  lat.value = la;
  currentPage.value=1
  orderLists.value=[]
  init();
}
/**
 * 用户权限信息 是否可查看
 */
function UserIdentity() {
  const payload = {
    query: TestIem,
    variables: {
      driver_id: user_id,
    },
  };
  toPublish('ql/driver/checkPage', payload, (obj: any) => {
    const { data } = obj;
    state.value = data.check_page.is_open;
    uni.setStorageSync('Useridentity', data.check_page.is_open);
  });
}
/**
 * 初始化商品列表信息
 * @param page 当前获取页码数据
 * @param lon 经度
 * @param lat 纬度
 */
function init() {
  isLoading.value = true;
  const payload = {
    query: shops,
    variables: {
      page: currentPage.value,
      lon: Number(lon.value),
      lat: Number(lat.value),
    },
  };
  toPublish('ql/store/getIndexGoodsList', payload, (obj: any) => {
    const { index_goods_list } = obj.data;
    isLoading.value = false;
    orderLists.value = [...orderLists.value, ...index_goods_list.list];
    lastPage.value = index_goods_list.lastpage;
  });
}
/**
 * 加载更多
 */
function loadMore() {
  if (currentPage.value < lastPage.value) {
    currentPage.value++;
    init();
  }
}
</script>

<style scoped lang="less">
.shopTop {
  width: 100%;
  box-sizing: border-box;
  padding: 0px 20rpx;
}

.packageLsit {
  display: flex;
  align-items: center;

  image {
    width: 50rpx;
    height: 50rpx;
  }

  text {
    font-size: 30rpx;
    font-weight: 400;
    color: #181818;
    margin: 0px 10rpx;
  }
}

.tit {
  font-size: 28rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #309bff;
}
</style>